<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>品优购商城 - 购物车</title>
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2664437_7tmpdwjg2d5.css">
    <!-- 引入初始化样式-->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/cart.css">
    <style>
        body {
            height: 2000px;
        }

        #header {
            border: none;
        }

        #header .search {
            left: unset;
            right: 0 !important;
        }

        #header .allgoods {
            position: absolute;
            left: 0;
            top: 104px;
            font-size: 16px;
            color: #c81623;
        }

        #header .allgoods span {
            font-size: 14px;
        }

        /* 内容区域 start */
        .content_buy .thead {
            width: 100%;
            height: 34px;
            line-height: 34px;
            border: 1px solid #ddd;
            background-color: #f5f5f5;
            color: #666;
        }

        .content_buy .thead a:nth-child(1) {
            margin-right: 204px;
        }

        .content_buy .thead a:nth-child(2) {
            margin-right: 336px;
        }

        .content_buy .thead a:nth-child(3),
        .thead a:nth-child(4),
        .thead a:nth-child(5) {
            margin-right: 114px;
        }

        .content_buy .thead a:nth-child(1)>input {
            margin-right: 10px;
            vertical-align: -16%;
        }

        /* 店铺名 shopItem*/
        .shopItem .shopname {
            height: 43px;
            line-height: 60px;
            margin-bottom: 20px;
            border-bottom: 2px solid #ddd;
        }

        .shopItem .shopname input {
            margin-right: 10px;
            vertical-align: -16%;
        }

        .shopItem .shopname div {
            float: right;
        }

        .shopItem .shopname div>span {
            color: #c81623;
        }

        .shopItem .shopgoodList {
            border: 1px solid #ddd;
        }

        .shopgoodList .item {
            padding: 14px 0 14px 5px;
            border-bottom: 1px solid #ddd;
        }

        .shopgoodList .item:last-child {
            border-bottom: 0;
        }

        .shopgoodList .item .giftserver {
            margin-left: 36px;
            margin-top: 24px;
            overflow: hidden;
        }
        /* 假如商品有赠品服务模块 并且这项商品的padding-bottom为5*/
        .shopgoodList .item.giftserver{
            padding-bottom: 5px;
        }
        .shopgoodList .item .giftserver li {
            margin-bottom: 10px;
        }

        .shopgoodList .item .giftserver li:last-child {
            margin-bottom: 0;
        }

        .shopgoodList .item .giftserver li>span {
            float: left;
            color: #666;
        }

        .shopgoodList .item .giftserver li span:first-child {
            width: 260px;
            margin-right: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #999;
        }

        /* 如果这项商品有换购模块，那么加上exchange属性 */
        .shopgoodList .item.exchange li:first-child.check,
        .shopgoodList .item.exchange .shopImg,
        .shopgoodList .item.exchange .shopDescribe,
        .shopgoodList .item.exchange .pSize {
            padding-top: 42px;
        }
        .shopgoodList .item.exchange li:first-child{
            position: relative;
            
        }
        .item.exchange li:first-child.check .change{
            width: 500px;
            height: 20px;
            line-height: 20px;
            position: absolute;
            top: 2px;
        }
        .item.exchange li:first-child.check .change>span:first-child{
            display: inline-block;
            width: 44px;
            height: 18px;
            margin-right: 17px;
            border: 1px solid #c81623;
            color: #c81623;
            text-align: center;
            
        }
        .item.exchange li:first-child.check .change>span:nth-child(3){
            display: inline-block;
            width: 70px;
            height: 100%;
            margin: 0 5px 0 20px;
            background-color: #c81623;
            color: #fff;
            text-align: center;
        }
        .shopgoodList .item.exchange>ul {
            height: 124px;
            color: #333;

        }
        /* 正常情况下，没有服务模块，没有换购 */
        .shopgoodList .item>ul {
            height: 80px;
            color: #333;

        }

        .shopgoodList .item>ul li {
            float: left;
        }

        .shopgoodList ul .shopImg {
            width: 80px;
            margin: 0 12px 0 18px;

        }

        .shopgoodList ul .shopImg>.h80 {
            width: 100%;
            height: 80px;
            border: 1px solid #ededed;
        }

        .shopgoodList ul .shopImg .h80>img {

            width: 100%;
        }

        .shopgoodList ul .shopDescribe {
            width: 218px;
            margin-right: 12px;
            padding-top: 5px;
            line-height: 20px;

        }

        .shopgoodList ul .shopDescribe>div:nth-child(1) {
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;

        }

        .shopgoodList ul .shopDescribe .gift {
            color: #999;
        }

        .shopgoodList ul .pSize {
            width: 148px;
            padding-top: 5px;
            margin-right: 100px;

        }

        .shopgoodList ul .pSize>p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .shopgoodList ul .pPrice,.shopgoodList ul .pCount{
            width: 100px;
        }
        .shopgoodList ul .pQuantity {

            width: 100px;
            text-align: center;
            margin: 0 66px 0 16px;
            color: #999;
        }

        .shopgoodList ul .pQuantity>div {
            width: 100%;
            height: 30px;
            border: 1px solid #ddd;
            color: #333;
            margin-bottom: 4px;
        }

        .shopgoodList ul .pQuantity input[type="text"] {
            width: 40px;
            height: 100%;
            line-height: 30px;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            text-align: center;
            font-size: 16px;

        }

        .shopgoodList ul .pQuantity input[type="button"] {
            width: 28px;
            height: 100%;
            background-color: #fff;
            font-size: 18px;

        }

        .shopgoodList ul .pQuantity input.add {
            color: #c81623;
        }

        .shopgoodList ul .pOperation {
            height: 32px;
            padding-top: 5px;
            line-height: 16px;
            margin-left: 54px;
        }

        .shopgoodList .pPrice,
        .shopgoodList .pCount {
            padding-top: 5px;
            font-size: 14px;
        }

        .shopgoodList .pCount {
            font-weight: bold;
        }

        /* 点击禁用 */
        .reduce.disabled{
            cursor: not-allowed;
            background-color: #f1f1f1;
            color: #ccc;
        }
    </style>
</head>

<body>
    <!-- 顶部通栏的 -->
    <div id="shortcut">
        <div class="navigation w">
            <ul class="fl">
                <li><span>品优购欢迎您！<a href="javascript:;"> 请登录</a></span></li>
                <li class="register"><a href="./register.html">免费注册</a></li>
            </ul>
            <ul class="fr">

                <li><a href="javascript:;">我的订单</a></li>
                <li class="spacer"></li>
                <li class="myshop"><a href="javascript:;">我的品优购<i class="iconfont icon-jiantou"></i></a></li>
                <li class="spacer"></li>
                <li><a href="javascript:;">品优购会员</a></li>
                <li class="spacer"></li>
                <li><a href="javascript:;">企业采购</a></li>
                <li class="spacer"></li>
                <li class="follow"><a href="javascript:;">关注品优购<i class="iconfont icon-jiantou"></i></a></li>
                <li class="spacer"></li>
                <li class="custom"><a href="javascript:;">客户服务<i class="iconfont icon-jiantou"></i></a></li>
                <li class="spacer"></li>
                <li class="website"><a href="javascript:;">网站导航<i class="iconfont icon-jiantou"></i></a></li>
            </ul>
        </div>
    </div>
    <!-- 头部区域，logo，搜索框  -->
    <header id="header" class="w">
        <div class="logo ">
            <h1 title="品优购商城"><a href="index.html">品优购商城</a></h1>
        </div>
        <div class="search">
            <div class="form">
                <form action="#">
                    <input type="text" class="search_txt" placeholder="1加7plus">
                    <button class="btn">搜索</button>
                </form>
            </div>

        </div>
        <div class="allgoods">全部商品 <span>11</span></div>

    </header>
    <div class="content_buy w">
        <div class="thead">
            <a href="javascript:;"><input class="allcheck" type="checkbox">全选</a>
            <a href="javascript:;">商品</a>
            <a href="javascript:;">单价</a>
            <a href="javascript:;">数量</a>
            <a href="javascript:;">小计</a>
            <a href="javascript:;">操作</a>
        </div>
        <div class="shopItem">
            <div class="shopname"><input class="checkshop" type="checkbox">传智自营 <div>运费：￥6.00 <span>还差：99.00免运费</span></div>
            </div>
            <div class="shopgoodList">
                <div class="item">
                    <ul>
                        <li class="check"><input class="checkitem" type="checkbox"></li>
                        <li class="shopImg">
                            <div class="h80"><img src="./upload/cart/cart2.dpg"></div>
                        </li>
                        <li class="shopDescribe">
                            <div>苹果（Apple）MD463FE/A MAC Thunderbolt雷电接口 至千兆以太网转</div>
                            <div class="gift">购买礼品包装</div>
                        </li>
                        <li class="pSize">
                            <p>尺码：Thunderbolt至千兆以太网转</p>
                        </li>
                        <li class="pPrice">￥<span>248.00</span></li>
                        <li class="pQuantity">
                            <div><input class="reduce" type="button" value="-"><input class="goodsnum" type="text"  value="1"><input class="add"
                                    type="button" value="+"></div><span>有货</span>
                        </li>
                        <li class="pCount">￥<span>248.00</span></li>
                        <li class="pOperation"><a href="">删除</a><br> <a href="">移到我的关注</a></li>
                    </ul>
                </div>
                <div class="item exchange giftserver">
                    <ul>
                        <li class="check"><input class="checkitem" type="checkbox">
                            <div class="change"><span>换购</span><span>活动商品购满2888.00元，即可加价换购商品1件 ></span>
                                <span>查看换购品</span>
                                <span>去凑单 ></span></div>
                        </li>
                        <li class="shopImg">
                            <div class="h80"><img src="./upload/cart/cart3.dpg"></div>
                        </li>
                        <li class="shopDescribe">
                            <div>vivo iQOO U3x 高通骁龙八核强芯 5000mAh大电池 90Hz竞速屏 双模5G全网通 6GB+64GB 雅灰 iqoou3x</div>
                            <div class="gift">购买礼品包装</div>
                        </li>
                        <li class="pSize">
                            <p>颜色：雅黑</p>
                            <p>内存：6GB+64GB</p>
                        </li>
                        <li class="pPrice">￥<span>1199.00</span></li>
                        <li class="pQuantity">
                            <div><input class="reduce" type="button" value="-"><input type="text" value="1"><input class="add"
                                    type="button" value="+"></div><span>有货</span>
                        </li>
                        <li class="pCount">￥<span>1199.00</span></li>
                        <li class="pOperation"><a href="">删除</a><br> <a href="">移到我的关注</a></li>
                    </ul>
                    <div class="giftserver">
                        <ul class="clearfix">
                            <li class="clearfix"><span>[赠品]圣迪威（Sendio）MacBook13.3寸屏幕保...</span> <span>x1</span></li>
                            <li class="clearfix"><span>[赠品]圣迪威（Sendio）MacBook13.3清洁套装...</span> <span>x1</span></li>
                        </ul>
                    </div>
                </div>
                <div class="item">
                    <ul>
                        <li class="check"><input class="checkitem" type="checkbox"></li>
                        <li class="shopImg">
                            <div class="h80"><img src="./upload/cart/cart1.dpg"></div>
                        </li>
                        <li class="shopDescribe">
                            <div>小米Redmi 红米Note9 5G手机全网通 6G+128G 云墨灰 官方标配</div>
                            <div class="gift">购买礼品包装</div>
                        </li>
                        <li class="pSize">
                            <p>颜色：6G+128G 云墨灰</p>
                            <p>套餐：官方标配</p>
                        </li>
                        <li class="pPrice">￥<span>3199.00</span></li>
                        <li class="pQuantity">
                            <div><input type="button" value="-"><input type="text" value="1"><input class="add"
                                    type="button" value="+"></div><span>有货</span>
                        </li>
                        <li class="pCount">￥<span>3199.00</span></li>
                        <li class="pOperation"><a href="">删除</a><br> <a href="">移到我的关注</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="shopItem">
            <div class="shopname"><input class="checkshop" type="checkbox">iQOO京东官方自营旗舰店 </div>

            <div class="shopgoodList">
                <div class="item">
                    <ul>
                        <li class="check"><input class="checkitem" type="checkbox">

                        </li>
                        <li class="shopImg">
                            <div class="h80"><img src="./upload/cart/cart2.dpg"></div>
                        </li>
                        <li class="shopDescribe">
                            <div>苹果（Apple）MD463FE/A MAC Thunderbolt雷电接口 至千兆以太网转</div>
                            <div class="gift">购买礼品包装</div>
                        </li>
                        <li class="pSize">
                            <p>尺码：Thunderbolt至千兆以太网转</p>
                        </li>
                        <li class="pPrice">￥<span>248.00</span></li>
                        <li class="pQuantity">
                            <div><input type="button" value="-"><input type="text" value="1"><input class="add"
                                    type="button" value="+"></div><span>有货</span>
                        </li>
                        <li class="pCount">￥<span>248.00</span></li>
                        <li class="pOperation"><a href="">删除</a><br> <a href="">移到我的关注</a></li>
                    </ul>
                </div>
                <div class="item">
                    <ul>
                        <li class="check"><input class="checkitem" type="checkbox"></li>
                        <li class="shopImg">
                            <div class="h80"><img src="./upload/cart/cart3.dpg"></div>
                        </li>
                        <li class="shopDescribe">
                            <div>vivo iQOO U3x 高通骁龙八核强芯 5000mAh大电池 90Hz竞速屏 双模5G全网通 6GB+64GB 雅灰 iqoou3x</div>
                            <div class="gift">购买礼品包装</div>
                        </li>
                        <li class="pSize">
                            <p>颜色：雅黑</p>
                            <p>内存：6GB+64GB</p>
                        </li>
                        <li class="pPrice">￥<span>1199.00</span></li>
                        <li class="pQuantity">
                            <div><input type="button" value="-"><input type="text" value="1"><input class="add"
                                    type="button" value="+"></div><span>有货</span>
                        </li>
                        <li class="pCount">￥<span>1199.00</span></li>
                        <li class="pOperation"><a href="">删除</a><br> <a href="">移到我的关注</a></li>
                    </ul>
                </div>
                <div class="item">
                    <ul>
                        <li class="check"> <input class="checkitem" type="checkbox"></li>
                        <li class="shopImg">
                            <div class="h80"><img src="./upload/cart/cart1.dpg"></div>
                        </li>
                        <li class="shopDescribe">
                            <div>小米Redmi 红米Note9 5G手机全网通 6G+128G 云墨灰 官方标配</div>
                            <div class="gift">购买礼品包装</div>
                        </li>
                        <li class="pSize">
                            <p>颜色：6G+128G 云墨灰</p>
                            <p>套餐：官方标配</p>
                        </li>
                        <li class="pPrice">￥<span>3199.00</span></li>
                        <li class="pQuantity">
                            <div><input type="button" value="-"><input type="text" value="1"><input class="add"
                                    type="button" value="+"></div><span>有货</span>
                        </li>
                        <li class="pCount">￥<span>3199.00</span></li>
                        <li class="pOperation"><a href="">删除</a><br> <a href="">移到我的关注</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="./js/cart.js"></script>
</body>

</html>